---
title: Elemento del menú
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Un elemento de menú versátil diseñado para ser utilizado en un menú o lista de navegación.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"        | Tipo              | Descripción                                                                                                                                     |
| -------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| IconoIzquierdo | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú                                                              |
| acento         | "cadena"          | Especifica el color de acento del elemento de menú. Las opciones incluyen: `default`, `danger`, y `placeholder` |
| texto          | "cadena"          | El contenido de texto del elemento del menú                                                                                                     |
| iconButtons    | array             | An array of objects representing additional icon buttons associated with the menu item                                                          |
| isTooltipOpen  | booleano          | Controls the visibility of the tooltip associated with the menu item                                                                            |
| testId         | "cadena"          | El atributo data-testid para propósitos de prueba                                                                                               |
| alHacerClic    | "función"         | Callback function triggered when the menu item is clicked                                                                                       |
| "className"    | "cadena"          | "Nombre opcional para estilización adicional"                                                                                                   |

</Tab>
</Tabs>

## Variantes

Las diferentes variantes del componente de elemento de menú incluyen las siguientes:

### Comando

Un elemento de menú estilo comando en un menú para indicar atajos de teclado.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"        | Tipo              | Descripción                                                                        |
| -------------- | ----------------- | ---------------------------------------------------------------------------------- |
| IconoIzquierdo | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú |
| texto          | cadena            | El contenido de texto del elemento del menú                                        |
| firstHotKey    | "cadena"          | El primer atajo de teclado asociado con el comando                                 |
| secondHotKey   | "cadena"          | El segundo atajo de teclado asociado con el comando                                |
| isSelected     | booleano          | Indica si el elemento del menú está seleccionado o resaltado                       |
| alHacerClic    | "función"         | Callback function triggered when the menu item is clicked                          |
| "className"    | cadena            | "Nombre opcional para estilización adicional"                                      |

</Tab>
</Tabs>

### Draggable

Un componente de elemento de menú arrastrable diseñado para ser utilizado en un menú o lista donde los elementos se pueden arrastrar y se pueden realizar acciones adicionales a través de botones de iconos.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"        | Tipo              | Descripción                                                                                             |
| -------------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
| IconoIzquierdo | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú                      |
| acento         | "cadena"          | El color de acento del elemento del menú. Puede ser `default`, `placeholder` y `danger` |
| iconButtons    | array             | An array of objects representing additional icon buttons associated with the menu item                  |
| isTooltipOpen  | booleano          | Controls the visibility of the tooltip associated with the menu item                                    |
| alHacerClic    | función           | Función de devolución de llamada que se activa cuando se hace clic en el enlace                         |
| texto          | cadena            | El contenido de texto del elemento del menú                                                             |
| isDragDisabled | booleano          | Indica si el arrastre está desactivado                                                                  |
| "className"    | cadena            | "Nombre opcional para estilización adicional"                                                           |

</Tab>
</Tabs>

### Multi Selección

Proporciona una manera para implementar la funcionalidad de selección múltiple con una casilla de verificación asociada.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"        | Tipo              | Descripción                                                                                     |
| -------------- | ----------------- | ----------------------------------------------------------------------------------------------- |
| IconoIzquierdo | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú              |
| texto          | cadena            | El contenido de texto del elemento del menú                                                     |
| seleccionado   | booleano          | Indica si el elemento del menú está seleccionado (marcado)                   |
| onSelectChange | "función"         | Función de devolución de llamada activada cuando el estado de la casilla de verificación cambia |
| "className"    | cadena            | "Nombre opcional para estilización adicional"                                                   |

</Tab>
</Tabs>

### Multi Selección con Avatar

Un elemento de menú de selección múltiple con un avatar, una casilla para selección y contenido textual.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"        | Tipo        | Descripción                                                                                     |
| -------------- | ----------- | ----------------------------------------------------------------------------------------------- |
| avatar         | `ReactNode` | El avatar o icono que se mostrará en el lado izquierdo del elemento del menú                    |
| texto          | "cadena"    | El contenido de texto del elemento del menú                                                     |
| seleccionado   | booleano    | Indica si el elemento del menú está seleccionado (marcado)                   |
| onSelectChange | función     | Función de devolución de llamada activada cuando el estado de la casilla de verificación cambia |
| "className"    | cadena      | "Nombre opcional para estilización adicional"                                                   |

</Tab>
</Tabs>

### Navegar

Un elemento de menú que presenta un icono opcional a la izquierda, contenido textual y un icono de chevron a la derecha.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"        | Tipo              | Descripción                                                                        |
| -------------- | ----------------- | ---------------------------------------------------------------------------------- |
| IconoIzquierdo | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú |
| texto          | "cadena"          | El contenido de texto del elemento del menú                                        |
| alHacerClic    | "función"         | Función de retorno que se activará cuando se haga clic en el elemento del menú     |
| "className"    | "cadena"          | "Nombre opcional para estilización adicional"                                      |

</Tab>
</Tabs>

### Seleccionar

Un elemento de menú seleccionable, que presenta contenido opcional a la izquierda (icono y texto) y un indicador (icono de verificación) para el estado seleccionado.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"        | Tipo              | Descripción                                                                        |
| -------------- | ----------------- | ---------------------------------------------------------------------------------- |
| IconoIzquierdo | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú |
| texto          | cadena            | El contenido de texto del elemento del menú                                        |
| seleccionado   | booleano          | Indica si el elemento del menú está seleccionado (marcado)      |
| "desactivado"  | booleano          | Indica si el elemento del menú está deshabilitado                                  |
| hovered        | booleano          | Indica si el elemento del menú está actualmente siendo sobrevolado                 |
| alHacerClic    | "función"         | Función de retorno que se activará cuando se haga clic en el elemento del menú     |
| "className"    | "cadena"          | "Nombre opcional para estilización adicional"                                      |

</Tab>
</Tabs>

### Select Avatar

Un elemento de menú seleccionable con un avatar, que presenta contenido opcional a la izquierda (avatar y texto) y un indicador (icono de verificación) para el estado seleccionado.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| "Props"       | Tipo        | Descripción                                                                    |
| ------------- | ----------- | ------------------------------------------------------------------------------ |
| avatar        | `ReactNode` | El avatar o icono que se mostrará en el lado izquierdo del elemento del menú   |
| texto         | cadena      | El contenido de texto del elemento del menú                                    |
| seleccionado  | booleano    | Indica si el elemento del menú está seleccionado (marcado)  |
| deshabilitado | booleano    | Indica si el elemento del menú está deshabilitado                              |
| hovered       | booleano    | Indica si el elemento del menú está actualmente siendo sobrevolado             |
| testId        | cadena      | El atributo data-testid para propósitos de prueba                              |
| alHacerClic   | "función"   | Función de retorno que se activará cuando se haga clic en el elemento del menú |
| "className"   | "cadena"    | "Nombre opcional para estilización adicional"                                  |

</Tab>
</Tabs>

### Seleccionar Color

Un elemento de menú seleccionable con una muestra de color para situaciones donde se desea que los usuarios elijan un color del menú.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"       | Tipo      | Descripción                                                                                                                                                                                                         |
| ------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| color         | "cadena"  | The theme color to be displayed as a sample in the menu item. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris` |
| seleccionado  | booleano  | Indica si el elemento del menú está seleccionado (marcado)                                                                                                                                       |
| "desactivado" | booleano  | Indica si el elemento del menú está deshabilitado                                                                                                                                                                   |
| hovered       | booleano  | Indica si el elemento del menú está actualmente siendo sobrevolado                                                                                                                                                  |
| variante      | "cadena"  | La variante de la muestra de color. Puede ser `default` o `pipeline`                                                                                                                                |
| alHacerClic   | "función" | Función de retorno que se activará cuando se haga clic en el elemento del menú                                                                                                                                      |
| "className"   | cadena    | "Nombre opcional para estilización adicional"                                                                                                                                                                       |

</Tab>
</Tabs>

### Cambiar

Un elemento de menú con un interruptor de palanca asociado para permitir a los usuarios habilitar o deshabilitar una característica específica

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| "Props"         | Tipo              | Descripción                                                                         |
| --------------- | ----------------- | ----------------------------------------------------------------------------------- |
| IconoIzquierdo  | "ComponenteIcono" | Un icono izquierdo opcional que se muestra antes del texto en el elemento del menú  |
| texto           | "cadena"          | El contenido de texto del elemento del menú                                         |
| conmutado       | booleano          | Indica si el interruptor de palanca está en el estado "encendido" o "apagado"       |
| cambioConmutado | "función"         | Función de retorno que se activa cuando el estado del interruptor de palanca cambia |
| tamañoConmutado | "cadena"          | El tamaño del interruptor de palanca. It can be either \           |
| "className"     | cadena            | "Nombre opcional para estilización adicional"                                       |

</Tab>
</Tabs>
